<template>
	<view class="wallet-detail">
		<image class="top-bg" mode="aspectFill" src="/static/wallet/wallet-bg.png"></image>
		<view class="pl-3 pr-3 wallet-detail-wrap">
			<view class="flex justify-between align-center p-2 mb-3 serach-bar">
				<image class="time-icon" src="/static/wallet/time.png" mode="widthFix"></image>
				<u--text mode="date" color="#fff" @click="showStartDate = true" :text="startDate"></u--text>
				<view class="">至</view>
				<u--text mode="date" color="#fff" @click="showEndDate = true" :text="endDate"></u--text>
				<u-button @click="handleSearch" class="search-btn" :hairline="false" text="搜索" size="mini" color="#5c5e7d">
				</u-button>
			</view>

			<view class="flex justify-around pt-3 pb-3 mb-3 total">
				<view class="flex justify-center align-center direction-column item">
					<text class="num">{{totalOrder}}</text>
					<text class="title">总单数</text>
				</view>
				<view class="flex justify-center align-center direction-column item">
					<u--text color="#e0584e" size="30rpx" bold mode="price" :text="totalIncome"></u--text>
					<text class="title">总收入</text>
				</view>
			</view>
			<view class="mb-3 wallet-list">
				<u-list @scrolltolower="scrolltolower" height="900rpx">
					<u-list-item class="mb-2 p-2 item" v-for="(item,idx) in orderList" :key="idx">

						<view class="flex justify-between mb-1 line">
							<u--text color="#333" lines=1 size="28rpx" :text="item.ItemName"></u--text>
							<view>
								<u--text color="#ee8445" size="22rpx" :text="'+'+ item.JinEr"></u--text>
							</view>
						</view>
						<view class="flex justify-between mb-1 line">
							<view>
								<u--text color="#666" lines=1 size="22rpx" text="订单编号"></u--text>
							</view>
							<u--text align="right" color="#666" size="22rpx" :text="item.OrderId"></u--text>
						</view>
						<view class="flex justify-between line">
							<u--text color="#666" lines=1 size="22rpx" :text="item.CreateDate"></u--text>
							<view class="">
								<u--text align="right" color="#666" size="22rpx" :text="'余额 ¥' + item.Balance">
								</u--text>
							</view>
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
		<u-safe-bottom></u-safe-bottom>
		<u-datetime-picker :show="showStartDate" v-model="startDate" mode="date" :formatter="formatter"
			@cancel="showStartDate=false" @confirm="showStartDate=false">
		</u-datetime-picker>
		<u-datetime-picker :show="showEndDate" v-model="endDate" mode="date" :formatter="formatter"
			@cancel="showEndDate=false" @confirm="showEndDate=false"></u-datetime-picker>
	</view>
	</view>
</template>

<script>
	import {
		balanceFollowList
	} from "@/apis/wallet.js";
	import {
		parseTime,
		getTotalPageNum
	} from "@/util";
	export default {
		data() {
			return {
				showStartDate: false,
				showEndDate: false,
				startDate: Number(new Date()),
				endDate: Number(new Date()),
				currPageNo: 1,
				totalPagesNo: 1,
				totalIncome: 0,
				totalOrder: 0,
				orderList: [],
			};
		},
		onLoad() {
			const startDate = new Date()
			startDate.setMonth(startDate.getMonth() - 3)
			this.startDate = Number(startDate)
			this.fetchData()
		},
		methods: {
			handleDateconfirm(e) {
				this.showStartDate = false
			},
			handleSearch(){
				this.currPageNo = 1,
				this.totalPagesNo = 1,
				this.orderList = []
				this.fetchData()
			},
			async fetchData() {
				const res = await balanceFollowList({
					Start: parseTime(this.startDate, "{y}-{m}-{d}"),
					End: parseTime(this.endDate, "{y}-{m}-{d}"),
					PageNo: this.currPageNo,
				})
				if (res.MsgCode != 0) return
				this.totalIncome = res.data.SumJinEr
				this.totalOrder = res.data.Count
				this.orderList = [...this.orderList, ...res.data.BalanceList] 
				this.totalPagesNo = getTotalPageNum(res.data.Count, 10)
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			scrolltolower() {
				if(this.currPageNo < this.totalPagesNo){
					this.currPageNo += 1
					this.fetchData()
				}
			},
		}
	}
</script>

<style lang="scss">
	.wallet-detail {
		.top-bg {
			width: 100%;
			height: 320rpx;
			margin-top: -44px;
			z-index: -1;
		}

		.wallet-detail-wrap {
			margin-top: -200rpx;

			.serach-bar {
				background-color: rgba(255, 255, 255, 0.2);
				border-radius: $s-border-radius;
				color: #fff;
				font-size: 28rpx;

				.time-icon {
					width: 35rpx
				}

				::v-deep .u-text {
					flex: inherit !important;
					width: inherit !important;
				}

				.search-btn {
					width: 100rpx;
					min-width: 100rpx;
					margin: 0;
					height: 50rpx;
					border-width: 0 !important;
					border-radius: $s-border-radius;
				}
			}

			.total {
				background-color: #fff;
				box-shadow: $s-bg-shadow;
				border-radius: $s-border-radius;

				.item {

					::v-deep .u-text__price {
						font-size: 12px !important;
						font-weight: normal !important;
					}

					.title {
						font-size: 26rpx;
					}

					.num {
						font-size: 30rpx;
						font-weight: bold;
						color: #ee8445;

					}

					.price {
						font-size: 30rpx;
						font-weight: bold;
						color: #df6056;
					}
				}
			}

			.wallet-list {
				.item {
					background-color: #fff;
					box-shadow: $s-bg-shadow;
					border-radius: $s-border-radius;
				}
			}
		}
	}
</style>
